<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>offsetTop</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#div1{
				margin: 30px;
				padding: 10px;
				width: 150px; height: 150px;
				background-color: red;
				position: relative;
			}
			#div2{
				width: 50px; height: 50px;
				background-color: gray;
			}
		</style>
		<script type="text/javascript">
			// var   /vɑr/
			// alert   /əˈlɜːrt/
			// document  /ˈdɒkjumənt/ 
			// onload   /ˌɒnˈləʊd/
			// getElementById   /ɡet  elɪmənt  baɪ  aɪ ˈdiː/ 
			// currentStyle   /kɜːrənt  staɪl/
			// getComputedStyle    /ɡet  kəmˈpjuːtɪd  staɪl/ 
			// offsetTop    /ɒfset  tɒp/
			
			//解决兼容问题的获取Style方法
			function getStyle(node, cssStyle){
				return node.currentStyle ? node.currentStyle[cssStyle] : getComputedStyle(node)[cssStyle];
			}
			
			// offsetTop获取当前节点对其主窗体的顶边相对距离
			
			window.onload = function(){
				var Odiv1 = document.getElementById("div1");
				var Odiv2 = document.getElementById("div2");
				
				alert(Odiv1.offsetTop);   //30
				//默认情况下div2是以整个窗体为相对位置的。
				// alert(Odiv2.offsetTop);   //40
				//当在div1的css样式中添加position: relative;，则div1中的子节点都是以div1为相对位置
				alert(Odiv2.offsetTop);   //10
			}
			
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2"></div>
		</div>
	</body>
</html>
